<template>
  <div class="bill-management-container">
    <!-- 页面标题 -->
    <h2 class="page-title">
      用户账单管理
    </h2>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form
        :inline="true"
        class="search-form"
      >
        <el-form-item label="账单ID">
          <el-input
            v-model="searchQuery.billId"
            placeholder="请输入账单ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="类型">
          <el-select
            v-model="searchQuery.type"
            placeholder="请选择类型"
            clearable
            style="width: 200px"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="收入"
              value="income"
            />
            <el-option
              label="支出"
              value="expense"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="resetSearch">
            重置
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedIds.length === 0"
            @click="batchDelete"
          >
            批量删除({{ selectedIds.length }})
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格布局 -->
    <div class="table-container">
      <el-table
        :data="currentPageData"
        border
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold'
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          prop="id"
          label="账单ID"
          width="120"
          align="center"
        />

        <el-table-column
          label="用户信息"
          align="center"
          width="220"
        >
          <template #default="{row}">
            <div class="user-cell">
              <el-avatar
                :size="32"
                :src="row.user.avatar || defaultAvatar"
              />
              <div class="user-info">
                <div>{{ row.user.nickname }}</div>
                <div class="user-id">
                  用户ID: {{ row.user.id }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="类型"
          width="100"
          align="center"
        >
          <template #default="{row}">
            <el-tag :type="row.type === 'income' ? 'success' : 'danger'">
              {{ row.type === 'income' ? '收入' : '支出' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="账单标题"
          align="center"
        />

        <el-table-column
          prop="category"
          label="明细种类"
          align="center"
        />

        <el-table-column
          prop="amount"
          label="明细数字"
          align="center"
        />

        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          width="120"
        />

        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="180"
        />

        <el-table-column
          prop=""
          label="状态"
          align="center"
          width="150"
        >
          <template #default="{row}">
            <el-tag :type="row.status === 'valid' ? 'success' : 'danger'">
              {{ row.status === 'valid' ? '有效' : '无效' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域（左下角） -->
    <div class="pagination-area-left">
      <span>共 {{ totalItems }} 条</span>
      <el-select
        v-model="pagination.pageSize"
        size="mini"
        style="width: 100px; margin: 0 15px"
        @change="handleSizeChange"
      >
        <el-option
          v-for="item in [10, 20, 50]"
          :key="item"
          :label="`${item}条/页`"
          :value="item"
        />
      </el-select>
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, jumper"
        :total="totalItems"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BillManagement',
  data () {
    return {
      searchQuery: {
        billId: '',
        type: ''
      },
      selectedIds: [],
      billList: [
        {
          id: '8789',
          user: {
            id: '17427',
            nickname: 'leo',
            avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
          },
          type: 'income',
          title: '发帖积分奖励',
          category: '发帖奖励',
          amount: '+100',
          remark: '优质内容奖励',
          createTime: '2025-06-11 12:26:08',
          status: 'valid'
        },
        {
          id: '8788',
          user: {
            id: '17704',
            nickname: '始',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
          },
          type: 'income',
          title: '发帖积分奖励',
          category: '发帖奖励',
          amount: '+100',
          remark: '优质内容奖励',
          createTime: '2025-06-10 17:49:26',
          status: 'valid'
        },
        {
          id: '8787',
          user: {
            id: '4',
            nickname: '林风',
            avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
          },
          type: 'income',
          title: '被打赏增加积分',
          category: '打赏收入',
          amount: '+50',
          remark: '文章被打赏',
          createTime: '2025-06-10 17:49:26',
          status: 'danger'
        },
        {
          id: '8786',
          user: {
            id: '17695',
            nickname: '小事',
            avatar: 'https://cube.elemecdn.com/e/f/0/4ea1b7e168d4b8eb8e1c1b5b8d672png.png'
          },
          type: 'expense',
          title: '打赏帖子扣除积分',
          category: '打赏支出',
          amount: '-50',
          remark: '打赏优质内容',
          createTime: '2025-06-10 17:49:26',
          status: 'valid'
        },
        {
          id: '8785',
          user: {
            id: '17695',
            nickname: '小事',
            avatar: 'https://cube.elemecdn.com/e/f/0/4ea1b7e168d4b8eb8e1c1b5b8d672png.png'
          },
          type: 'income',
          title: '签到奖励',
          category: '每日签到',
          amount: '+10',
          remark: '连续签到奖励',
          createTime: '2025-06-09 08:30:15',
          status: 'danger'
        },
        {
          id: '8784',
          user: {
            id: '17631',
            nickname: '熊一样',
            avatar: 'https://cube.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b4413cpng.png'
          },
          type: 'income',
          title: '抽奖获得积分',
          category: '活动奖励',
          amount: '+30',
          remark: '参与抽奖活动',
          createTime: '2025-06-08 14:20:45',
          status: 'valid'
        }
      ],
      filteredBillList: [],
      isSearched: false,
      pagination: {
        currentPage: 1,
        pageSize: 6
      },
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    currentPageData () {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return this.isSearched
        ? this.filteredBillList.slice(start, end)
        : this.billList.slice(start, end)
    },
    totalItems () {
      return this.isSearched
        ? this.filteredBillList.length
        : this.billList.length
    }
  },
  methods: {
    handleSearch () {
      this.isSearched = true
      this.pagination.currentPage = 1
      this.filteredBillList = this.billList.filter(bill => {
        const idMatch = !this.searchQuery.billId ||
          bill.id.toString().includes(this.searchQuery.billId)
        const typeMatch = !this.searchQuery.type ||
          bill.type === this.searchQuery.type
        return idMatch && typeMatch
      })
    },
    resetSearch () {
      this.isSearched = false
      this.searchQuery = {
        billId: '',
        type: ''
      }
      this.pagination.currentPage = 1
      this.filteredBillList = []
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    handleSelectionChange (selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    handleDetail (row) {
      // 这里可以打开详情对话框或跳转到详情页
      this.$message.info(`查看账单 ${row.id} 的详情`)
    },
    batchDelete () {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.$confirm('确定删除选中的账单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.billList = this.billList.filter(bill => !this.selectedIds.includes(bill.id))
        this.selectedIds = []
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleDelete (id) {
      this.$confirm('确定删除该账单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.billList = this.billList.filter(bill => bill.id !== id)
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.bill-management-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.search-area {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 15px;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
}

.user-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
}

.user-info {
  margin-left: 10px;
  text-align: left;
}

.user-id {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

/* 左下角分页样式 */
.pagination-area-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pagination-area-left .el-pagination {
  margin-left: 15px;
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }

  .search-form .el-form-item .el-input,
  .search-form .el-form-item .el-select {
    width: 100% !important;
  }

  .pagination-area-left {
    flex-direction: column;
    align-items: flex-start;
  }
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f5f7fa !important;
}
</style>
